<template>
	<div class="main flex flex-align-center">
		<div class="leftbox flex flex-v">
			<div class="title flex flex-align-center"></div>
			<div class="left_img"></div>
		</div>
		<div>
			<div class="user-layout-login" :class="{ official: isPro }">
				<div class="title">
					<image src="/login.png" class="logo"></image>
					<div>欢迎登录</div>
				</div>
				<div class="sub-title">{{ subTitle }}</div>
				<a-form id="formLogin" class="user-form" ref="formLogin" :form="form" @submit="handleSubmit">
					<template v-if="LoginType == 0">
						<a-form-item>
							<a-input
								class="hx-input"
								size="large"
								type="text"
								placeholder="请输入账户"
								v-decorator="['username']"
							>
							</a-input>
						</a-form-item>

						<a-form-item>
							<a-input
								class="hx-input"
								size="large"
								type="password"
								autocomplete="off"
								placeholder="请输入密码"
								v-decorator="[
									'password',
									{
										rules: [{ required: true, message: '请输入密码' }],
										validateTrigger: 'blur',
									},
								]"
							>
							</a-input>
						</a-form-item>
						<a-form-item>
							<a-button
								size="large"
								type="primary"
								htmlType="submit"
								class="login-button"
								:loading="loginBtn"
								:disabled="loginBtn"
								>登录</a-button
							>
						</a-form-item>
						<a-form-item>
							<a-checkbox
								v-decorator="[
									'rememberMe',
									{
										valuePropName: 'checked',
										initialValue: true,
									},
								]"
							>
								记住密码
							</a-checkbox>
						</a-form-item>
					</template>
				</a-form>
			</div>
		</div>
		<div class="copyright">Copyright © 2024 武汉康诺芯半导体有限公司 版权所有</div>
	</div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import defaultSettings from '@/config/defaultSettings'
import { PwdReg } from '@/utils/validate'
import md5 from 'md5'
import { sysManageapi, postAction } from '@/api/index.js'
import QS from 'qs'
// import QRCode from 'qrcode';
let timer = null
export default {
	data() {
		return {
			title: defaultSettings.title,
			subTitle: defaultSettings.subTitle,
			accountType: 'TEACHER', //TEACHER/老师，STUDENT/学生
			loginBtn: false,
			isLoginError: false,
			form: this.$form.createForm(this),
			PwdReg: PwdReg,
			isHasMdspwd: 0,
			LoginType: 0, //登录类型 0 账户密码 1二维码
			qrCode: '',
			qrCodeDataUrl: null,
			loginState: 0,
			validateStatus: '',
			validateStatusTip: '',
		}
	},
	mounted() {
		this.$nextTick(() => {
			// To disabled submit button at the beginning.
			try {
				const { username, password } = JSON.parse(localStorage.getItem('loginInfo'))
				// this.form.setFieldsValue({
				// 	username,
				// 	password,
				// });
			} catch (e) {
				// TODO handle the exception
			}
		})
	},
	computed: {
		...mapState(['isPro', 'hostname']),
	},
	created() {
		this.LoginType = localStorage.getItem('LoginType') ? localStorage.getItem('LoginType') - 0 : 0
		if (this.LoginType == 1) {
			this.getQrCode()
		}
	},
	beforeDestroy() {
		if (timer) {
			clearTimeout(timer)
			timer = null
		}
	},
	methods: {
		...mapActions(['Login', 'Logout', 'GetInfo']),
		handleSubmit(e) {
			e.preventDefault()
			const {
				form: { validateFields },
				Login,
			} = this
			const validateFieldsKey = ['username', 'password', 'rememberMe']
			validateFields(
				validateFieldsKey,
				{
					force: true,
				},
				(err, values) => {
					if (!err) {
						const loginParams = {
							username: values.username.trim(),
							md5Pass: md5(values.password.trim()),
						}

						this.loginBtn = true
						console.log(JSON.stringify(loginParams))
						/* 参数序列化 */
						this.$postAction(this.$api.login, loginParams)
							.then((da) => {
								console.log('数据' + JSON.stringify(da))
								let data = da.data
								let access_token = data.access_token
								/* 关闭浏览器不保存 */
								sessionStorage.setItem('access_token', access_token)
								sessionStorage.setItem('refresh_token', data.refresh_token)
								// this.$ls.set('access_token', access_token);
								// this.$ls.set('refresh_token', data.refresh_token);
								/* TODO 是否记住密码 */
								if (values.rememberMe) {
									localStorage.setItem('loginInfo', JSON.stringify(loginParams))
								} else {
									/* 忘记密码 */
									localStorage.removeItem('loginInfo')
								}
								localStorage.setItem('LoginType', '0')
								this.$router.push({
									path: '/',
								})
							})
							.finally(() => {
								this.loginBtn = false
							})
					} else {
						setTimeout(() => {
							this.loginBtn = false
						}, 600)
					}
				}
			)
		},
		getAllOrgList() {
			this.$postAction(sysManageapi.orgUrl.getAllList).then((res) => {
				if (res && res.code == 1) {
					this.orgList = res.data
				}
			})
		},
		async changeUserName() {
			let username = this.form.getFieldValue('username')
			if (username.trim()) {
				this.validateStatus = 'validating'
				this.validateStatusTip = '正在校验用户名'
			} else {
				this.validateStatus = 'error'
				this.validateStatusTip = '请输入用户名'
			}
		},
		//获取是否有md5密码
		getMd5PassIsNull(username) {
			return new Promise((resolve, reject) => {
				if (username) {
					this.$postAction(this.$api.getMd5PassIsNull + '?username=' + username.trim())
						.then((res) => {
							if (res && res.code == 1) {
								this.isHasMdspwd = res.data
								resolve(res.data)
							} else {
								resolve()
							}
						})
						.catch((err) => {
							//返回错误
							reject(err)
						})
				} else {
					reject()
				}
			})
		},
		async generateQRCode() {
			try {
				// const dataUrl = await QRCode.toDataURL(
				// 	JSON.stringify({
				// 		code: this.qrCode,
				// 		name: '用户登录',
				// 		company: '深圳中科讯联科技股份有限公司',
				// 	}),
				// 	{
				// 		margin: 0,
				// 		size: 300,
				// 	}
				// );
				// this.qrCodeDataUrl = dataUrl;
				// clearTimeout(timer);
				// timer = setTimeout(() => {
				// 	this.getLoginState();
				// }, 1000);
			} catch (error) {
				console.error('Error generating QR Code:', error)
			}
		},
		changeType() {
			this.LoginType = this.LoginType == 0 ? 1 : 0
			if (this.LoginType == 1) {
				this.getQrCode()
			} else {
				if (timer) {
					clearTimeout(timer)
					timer = null
				}
			}
		},
		getQrCode() {
			this.loginState = 0
			clearTimeout(timer)
			this.$postAction(this.$api.getQrCode).then((res) => {
				if (res && res.code == 1) {
					this.qrCode = res.data.code
					this.generateQRCode()
				}
			})
		},
		getLoginState() {
			this.$postAction(this.$api.getLoginState, {
				code: this.qrCode,
			})
				.then((res) => {
					if (res && res.code == 1) {
						this.loginState = res.data.loginState
						//0未扫码  1 已扫码未登录    2已登录、 3已过期。
						if (res.data.loginState == 0 || res.data.loginState == 1) {
							timer = setTimeout(() => {
								this.getLoginState()
							}, 1000)
						} else if (res.data.loginState == 2) {
							let data = res.data
							let access_token = data.oauth2AccessTokenStr
							/* 关闭浏览器不保存 */
							sessionStorage.setItem('access_token', access_token)
							localStorage.setItem('LoginType', '1')
							this.$router.push({
								path: '/',
							})
						} else {
							//提示过期
						}
					} else {
						this.loginState = 3
					}
				})
				.catch(() => {
					this.loginState = 3
				})
		},
	},
}
</script>
<style></style>
<style lang="less" scoped>
.main {
	width: 100%;
	height: 100%;
	// background: rgba(0, 190, 132, .3);
	.leftbox {
		position: relative;
		color: #262f59;
		width: 65%;
		// padding-top: 180px;
		padding-left: 50px;
		height: 100%;
		text-align: left;
		.title {
			position: absolute;
			text-align: center;
			left: 50px;
			right: 0;
			//top: 70px;
			top: 0;
			font-size: 80px;
			line-height: 140px;
			font-weight: 800;

			.logo {
				width: 59px;
				height: auto;
				margin-right: 28px;
				@media screen and (max-width: 1680px) {
					width: 39px;
				}
			}
			p {
				margin-bottom: 0;
			}
		}
		.left_img {
			position: absolute;
			height: 640px;
			max-height: 100vh;
			left: 0;
			right: 0;
			top: 50%;
			background: url(/login_left.png) no-repeat 20px bottom;
			background-size: 85% auto;
			transform: translateY(-50%);
			@media screen and (max-height: 768px) and (max-width: 1366px) {
				top: 40%;
			}
		}
		.title {
			position: absolute;
			top: 0;
			font-size: 70px;
			line-height: 140px;
			font-weight: 800;
			@media screen and (max-width: 1600px) {
				font-size: 50px;
				top: 20px;
			}
			@media screen and (max-height: 768px) {
				font-size: 50px;
				top: 0;
			}
		}
		.tip {
			font-size: 28px;
			line-height: 35px;
			margin-top: 8px;
		}
	}
	.rightbox {
		width: 35%;
		position: relative;
		z-index: 999;
	}
}
.user-layout-login {
	max-width: 520px;
	padding: 51px;
	// background: #fff;
	background: radial-gradient(124.4% 141.42% at 0% 0%, rgba(255, 255, 255, 0.57), rgba(255, 255, 255, 0) 100%);
	box-shadow: inset 0px 0px 20px 0px rgb(255, 255, 255);
	backdrop-filter: blur(100px);
	border-radius: 60px;
	@media screen and (max-width: 1680px) {
		// max-width: 480px;
		padding: 41px 51px;
	}
	.title {
		font-family: Open Sans;
		font-size: 40px;
		color: #262f59;
		font-weight: 800;
		//margin-bottom: 10px;//刚加的
		margin-bottom: 90px; //刚加的
		text-align: center;
		@media screen and (max-width: 1680px) {
			font-size: 34px;
			//刚加的
			margin-bottom: 50px;
		}
	}
	.sub-title {
		font-family: Open Sans;
		font-size: 26px;
		color: #78a1e8;
		font-weight: 800;
		margin-bottom: 10px;
		text-align: center;
	}
	.user-form {
		max-width: 520px;
		padding: 0 51px;
		@media screen and (max-width: 1680px) {
			max-width: 480px;
		}
		i {
			font-size: 36px;
			//color: @primary-color;
		}
		/deep/.a-form-item + .a-form-item {
			margin-bottom: 32px;
		}
	}
	/deep/ .hx-input {
		&.ant-input,
		.ant-input {
			line-height: 50px;
			height: 50px;
			font-size: 18px;
			font-weight: 500;
			padding: 0 30px 0 27px;
			background: radial-gradient(
				5565.9% 141.42% at 0% 0%,
				rgba(255, 255, 255, 0.7),
				rgba(255, 255, 255, 0.7) 100%
			); /* 警告：渐变使用了CSS不支持的旋转方式，可能无法按预期工作 */
			box-shadow: inset 0px 0px 20px 0px rgb(255, 255, 255);
			backdrop-filter: blur(100px);
			border-radius: 10px;
			//border: 2px solid @primary-color;
			@media screen and (max-width: 1680px) {
				line-height: 50px;
				height: 50px;
			}
		}
	}
	/deep/ .ant-input-affix-wrapper .ant-input:not(:first-child) {
		padding-left: 56px;
	}
	/deep/ .ant-checkbox {
		font-size: 24px;
		& + span {
			font-size: 18px;
		}
	}

	.ant-btn.login-button {
		margin-top: 41px;
		padding: 0 15px;
		font-size: 30px;
		height: 50px;
		line-height: 50px;
		width: 100%;
		font-size: 24px;
		border-radius: 10px;
		// box-shadow: 0px 12px 36px rgba(0, 190, 132, .3);
		@media screen and (max-width: 1680px) {
			line-height: 50px;
			height: 50px;
		}
	}
	.tab-button {
		padding: 0 15px;
		font-size: 30px;
		height: 50px;
		line-height: 50px;
		width: 100%;
		font-size: 20px;
		border-radius: 10px;
	}
}
.copyright {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	bottom: 20px;
	font-size: 16px;
	color: rgba(46, 36, 36, 0.6);
}
</style>
